<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>后台登录</title>
	<link href="Css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
	body
	{
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		height: 650px;
		font-size: 14px;
		line-height: 1.42857;
		color:#333;
		margin:0px;
		/*以下是渐变代码*/
		background: -webkit-linear-gradient(#FFFFFF,#565656); /* Safari 5.1 - 6.0 */
		background: -ms-linear-gradient(#FFFFFF,#565656);
   		background: -o-linear-gradient(#FFFFFF,#565656); /* Opera 11.1 - 12.0 */
   	    background: -moz-linear-gradient(#FFFFFF,#565656); /* Firefox 3.6 - 15 */
  		background: linear-gradient(#FFFFFF,#565656); /* 标准的语法（必须放在最后） */

	}
	.main_box
	{
		position: absolute;
		top:50%;
		left:50%;
		text-align: center;
		margin-top: -260px;
		margin-left: -300px;
		padding:30px;
		width:600px;
		height:460px;
		border: 1px solid #DDD;
		border-radius:5px;
		box-shadow: 1px 5px 8px #4A5352;
		background: #ccc;
		background: rgba(233,233,233,0.2) none repeat scroll !important;
		background: #fff ;
		filter:Alpha(opacity=20);
		
	}
	.login_form
	{
		
		padding-top: 20px;
		font-size: 16px;
		
	}
	.login_form
	{
		width: 538px;
		height:276px;
		margin:0 auto;
	}
	.login_box .form-group
	{
		margin-bottom: 20px;
	}
	label
	{
		display: inline-block;
		max-width: 100%;
		font-weight: 700;
	}
	.login_box .form-control .x319
	{
		width: 319px;
	}
	.login_box .form-control
	{
		display: inline-block;
		width: auto;
		font-size: 18px;
	}
	.form-control
	{
		height:34px;
		padding:6px 12px;
		line-height: 1.42875;
		color:#555;
		background-color:#fff;
		background-image: none; 
		border: 1px solid #ccc;
		border-radius: 4px;
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
		transition:border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	}
	.login_box .form-group.space
	{
		padding-top:15px;
		border-top:1px dotted #fff;
	}
	.warning
	{
		color:red;
		width:180px;
		height:30px;
		margin:0 auto;
		
	}
	.login_logo
	{
		background:#418BCA;
		height: 50px;
		line-height: 50px;
		border-radius: 5px;
		border:1px solid #a1a1a1;
		font-size: 22px;
		box-shadow: 5px 5px #ccc;
		color:#fff;
	}
	#btn1:hover
	{
		transform:scale(1.1);
		-ms-transform:scale(1.1); /* IE 9 */
		-webkit-transform:scale(1.1); /* Safari and Chrome */
		transition:0.3s;
		-webkit-transition:0.3s; /* Safari */
	}
	#btn2:hover
	{
		transform:scale(1.1);
		-ms-transform:scale(1.1); /* IE 9 */
		-webkit-transform:scale(1.1); /* Safari and Chrome */
		transition: 0.3s;
		-webkit-transition: 0.3s; /* Safari */
	}
	</style>
	<script src="Js/jquery.js"></script>
	<script src="Js/bootstrap.min.js"></script>
	<script type="text/javascript">
	window.onload=function()
	{
		var login_form=document.getElementById('login_form');
		var warning=document.getElementById('warning');
		var input1=document.getElementById('input1');
		var input2=document.getElementById('input2');
		var btn1=document.getElementById('btn1');
		var btn2=document.getElementById('btn2');
		input1.onblur=function()/*失去焦点触发函数*/
		{
			if(input1.value!="")
			{
				warning.innerHTML="";
			}else
			{
				warning.innerHTML="用户名不能为空！";

			}
			
		};
		input2.onblur=function()
		{
			if(input2.value!="")
			{
				warning.innerHTML="";
			}else
			{
				warning.innerHTML="密码不能为空！";

			}
			
		};
		btn1.onclick=function()
		{
			if(input1.value!=""&&input2.value!="")
			{
				
			}else 
			{
				warning.innerHTML="用户名或密码不能为空！";
			}		
		};
		btn1.onmousedown=function()/*鼠标按下改变登陆按钮颜色*/
			{
				btn1.style.backgroundColor='#ccc';
				btn1.style.color='#000';
			};
		btn1.onmouseup=function()
			{
				btn1.style.backgroundColor='#428BCA';
				btn1.style.color='#fff';
			};
		btn2.onclick=function()
		{
			warning.innerHTML="";
		};
	};

	</script>
</head>
<body>
	<div class="main_box">
		<div class="login_box">
			<div class="login_logo">登录到后台</div>
			<div class="login_form">
				<form id="login_form" method="post" action="">
					<div class="warning" id="warning"></div>
					<div class="form-group">
						<label>
							用户名：
						</label><input class="form-control x319 in" type="text" name="username" value="" id="input1" placeholder="请输入用户名"/>
					</div>
					<div class="form-group">
						<label>
							密 &nbsp;&nbsp;&nbsp;码：
						</label>
						<input class="form-control x319 in" type="password" name="password" value="" id="input2" placeholder="请输入密码">
					</div>
					<div class="form-group space">
						<input class="btn btn-primary btn-lg" type="submit" value="登 录" id="btn1" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="btn btn-default btn-lg" type="reset" value="重 置" id="btn2"/>
					</div>
				</form>
			</div>
		</div>
		<div class="bottom">
			Copyright © 2014 - 2015 <a href="#">www.example.com</a>
		</div>
	</div>
</body>
</html>